
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>	Lista de Ramal </title>		

		<!-- ICON -->
		<link rel="icon" href="img/favicon-16.png" sizes="16x16">
		<link rel="icon" href="img/favicon-32.png" sizes="32x32">

		<!-- CSS -->	
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
		<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">		
		<link href="css/style.css" rel="stylesheet" type="text/css">		
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300&amp;subset=latin,cyrillic-ext,vietnamese,cyrillic" rel="stylesheet" type="text/css">

	    <!-- SCRIPTS -->    	    
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
		<script src="https://code.jquery.com/jquery.js"></script> 	
		<script src="js/jquery.validate.js"></script> 		

		<!-- Include all compiled plugins (below), or include individual files as needed -->
	    <script src="js/bootstrap.min.js"></script>	

	    <!-- Google Analytics -->
	    <script async="" src="//www.google-analytics.com/analytics.js"></script>
	 
	    <script> 	 

	    	$(document).ready(function() { 

	    		$("#resultado_lista_ramal").load("scripts/list-de-ramal.php", function() {	 

    			});

    			/* Implementação do campos de Busca */
				
				$("#busca").keyup(function(){					
					var tabela = $(this).attr('alt');
					if( $(this).val() != ""){
						$("."+tabela+" tbody>tr").hide();
						$("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
					} else{
						$("."+tabela+" tbody>tr").show();
					}
				});	
				
				return false;			
				

    		});

    		$.extend($.expr[":"], {
				"contains-ci": function(elem, i, match, array) {
					return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
				}
			});	 

		</script>

		<!--Analytics-->
		<script>

		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-12175127-14', 'auto');
		  ga('send', 'pageview');

		</script>
		<!--Fim Analytics-->

	</head>

	<body>

		<div class="container">

			<div class="form-group" id="cabecalho-lista">
				<img src ="img/logo-lista.png">
			</div>

			<div class="form-group">
				<h1> Lista de Ramal </h1>
			</div>

			<form mode="role" id="lista-ramal" method="post">

				<div class="form-group left-inner-icon">
			    	<span class="glyphicon glyphicon-search"></span> 		    	
					<input type="text" name="txtBusca" class="form-control" id="busca" alt="lista-de-ramal"  placeholder="Buscar por área, nome ou ramal">				
				</div>		

			</form>    			    	
	
			<div id="resultado_lista_ramal" class="table-responsive"></div>	       

		</div>

	</body>

</html>